<template>
	<view class="index-list animated fadeInLeftBig fast">
		<view class="user-list-header uflex-a-j_sbc">
			<view class="user-list-header-left uflex-a-j_fsc">
				<image :src="item.userpic" mode="widthFix" lazy-load="true"></image>
				{{item.username}}
			</view>
			<view  v-if="!isguanzhu" class="user-list-header-right" @tap="guanzhu">
				<text class="icon iconfont icon-zengjia"></text>关注
			</view>
			<view v-if="isguanzhu" class="user-list-header-right" @tap="guanzhu">
				<text class="icon iconfont"></text>已关注
			</view>
		</view>
		<view class="user-list-body-content">
			{{item.title}}
		</view>
		<view class="user-list-body-image" @tap="opendetail">
			<!-- 图片 -->
			<image :src="item.titlepic" mode="widthFix" lazy-load></image>
			<!-- 视频 -->
			<template v-if="item.type==='video'">
				<text class="user-list-play icon iconfont icon-bofang">
				</text>
				<view class="user-list-playinfo">
					<text>{{item.playnum}}</text>次播放<text>{{item.long}}</text>
				</view>
			</template>
		</view>
		<view class="user-list-body-footer uflex-a-j_sbc">
			<view class="user-list-body-footer-left uflex-a-j_fsc">
				<view :class="{'active':(infonum.state === 1)}" @tap="caozuo('ding')"><text class="icon iconfont icon-icon_xiaolian-mian"></text>{{infonum.dingnum}}</view>
				<view :class="{'active':(infonum.state === 2)}" @tap="caozuo('cai')"><text class="icon iconfont icon-kulian"></text>{{infonum.cainum}}</view>
			</view>
			<view class="user-list-body-footer-right uflex-a-j_fsc">
				<view><text class="icon iconfont icon-pinglun"></text>{{item.commentnum}}</view>
				<view><text class="icon iconfont icon-zhuanfa"></text>{{item.sharenum}}</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props:{
			item: Object,
			index: Number
		},
		data() {
			return {
				isguanzhu: this.item.isguanzhu,
				infonum: this.item.infonum
			};
		},
		methods:{
			guanzhu() {
				if(this.isguanzhu){
					this.isguanzhu = false
					return
				}
				this.isguanzhu = true
				uni.showToast({
					title:"关注成功",
				})
			},
			caozuo(type) {
				if(type === 'ding'){
					if(this.infonum.state === 1) return
					this.infonum.dingnum ++
					if(this.infonum.state === 2){
						this.infonum.cainum --
					}
					this.infonum.state = 1
				}else{
					if(this.infonum.state === 2) return
					this.infonum.cainum ++
					if(this.infonum.state === 1){
						this.infonum.dingnum --
					}
					this.infonum.state = 2
				}
				
			},
			opendetail() {
				uni.navigateTo({
					url:'../../pages/detail/detail?detailData='+ JSON.stringify(this.item),
					animationType:"slide-in-top"
				})
			}
		}
	}
</script>

<style scoped lang="scss">
.index-list{
	width: 100%;
	height: auto;
	margin-bottom: 20upx;
	border-bottom: 1upx solid #eee;
	>.user-list-header{
		width: 100%;
		height: 90upx;
		overflow: hidden;
		> .user-list-header-left{
			width: auto;
			height: 100%;
			color: #999;
			> image{
				width: 90upx;
				height: 90upx;
				border-radius: 100%;
				margin-right: 10upx;
			}
		}
		> .user-list-header-right{
			background-color: #f4f4f4;
			border-radius: 8upx;
			padding: 3upx 8upx;
			> text{
				padding: 0 10upx;
			}
		}
	}
	>.user-list-body-content{
		padding: 10upx 0;
		font-size: 36upx;
	}
	>.user-list-body-image{
		width: 100%;
		height: auto;
		position: relative;
		> image{
			width: 100%;
			border-radius: 20upx;
		}
		.user-list-play{
			font-size: 140upx;
			position: absolute;
			top:50%;
			left: 50%;
			transform: translate(-50%, -50%);
			color: #fff;
		}
		.user-list-playinfo{
			position: absolute;
			bottom: 25upx;
			right: 10upx;
			padding: 5upx 20upx;
			color:#fff;
			font-size: 28upx;
			background-color: rgba($color: #000000, $alpha: .5);
			border-radius: 50upx;
		}
	}
	>.user-list-body-footer{
		width: 100%;
		color: #999;
		padding: 10upx 0 0 0;
		>.user-list-body-footer-left, .user-list-body-footer-right{
			> view{
				margin-right: 20upx;
				font-size: 36upx;
				>text{
					margin-right: 10upx;
				}
				> .iconfont{
					font-size: 40upx;
				}
			}
			.active{
				color: #f0ff42;
			}
		}
	}

	}
</style>
